/**
 * Created by Administrator on 2017/4/5.
 */
var React = require('react');

var ajax = require('../tools/ajax');

module.exports = React.createClass({
    getInitialState:function(){
        return {
            proList:[],
            person_number:0,
            leftTimes:[],
            rlist:[],
            timeList:[],
            bmFlag:[]
        }
    },

    componentDidMount:function(){

    },

    componentWillUnmount:function(){
        if(this.timer){
            clearInterval(this.timer);
            this.timer = null;
        }
    },
    timer:null,

    baoming(e){
        var newGoodId = e.currentTarget.getAttribute("data");
        console.log(newGoodId);
        localStorage.setItem("newGoodId",newGoodId);
        var userId = localStorage.getItem("userId");
        //if(userId){
            location.href = "#newGoodDetail";
        //}else{
            //location.href = "#login";
        //}
    },


    //秒数转化为时间 计时-1秒
    leftTimer(leftTime,i){
        var p =this;
        var time = parseInt(leftTime[i]);
        if(time) {
            var bmFlag = p.state.bmFlag;
            bmFlag[i] = false;
            p.setState({bmFlag:bmFlag});
            this.timer = setInterval(function () {
                var days = parseInt(time / 3600 / 24, 10); //计算剩余的天数
                var hours = parseInt(time / 3600 % 24, 10); //计算剩余的小时
                var minutes = parseInt(time / 60 % 60, 10);//计算剩余的分钟
                var seconds = parseInt(time % 60, 10);//计算剩余的秒数
                var remainingTime = days + "天" + hours + "时" + minutes + "分" + seconds + "秒";
                var rlist = p.state.rlist;
                rlist[i] = remainingTime;
                p.setState({
                    rlist: rlist
                });
                if(time==0){
                    clearInterval(p.timer);
                    var bmFlag = p.state.bmFlag;
                    bmFlag[i] = true;
                    p.setState({
                        rlist: rlist,
                        bmFlag:bmFlag
                    });
                    p.UpdateIs_new(p.state.proList[i].id);
                }
                time -= 1;
            }, 1000);
        }else{
            var rlist = p.state.rlist;
            rlist[i] = "0天0时0分0秒";
            var bmFlag = p.state.bmFlag;
            bmFlag[i] = true;
            p.setState({
                rlist: rlist,
                bmFlag:bmFlag
            });
            clearInterval(p.timer);
            p.UpdateIs_new(p.state.proList[i].id);
        }
    },
    /*修改Is_new状态*/
    UpdateIs_new(newgood_id){
        var p = this;
        ajax("POST","UpdateIs_new",{newgood_id:newgood_id},function(dt){
            if(dt && dt.success){
                console.log(dt);
            }
        });
    },
    render:function(){
        var p = this;
        var i = 0;
        var prolist = p.state.proList.map(function(obj){
            var num = 1 - (new Date(obj.action_end_time)- new Date())/(new Date(obj.action_end_time)- new Date(obj.action_start_time));
            var person_num = ((num * 100).toFixed(0)>=100 ? 100:(num * 100).toFixed(0)) + "%";
            i++;
            return(
                    <div key={obj.id} className="xinp-pro">
                        <div className="wrap">
                            <div className="pro-img">
                                <img src={obj.goods_img.split(",")[0]} />
                            </div>
                            <div className="xinp_con">
                                <p>{obj.goods_name}</p>
                                <div className="progress">
                                    <span style={{width:person_num}}></span>
                                </div>
                                <div className="xpTime">
                                    <div className="fl xinp_baom">
                                        <span>{obj.person_number}人</span>
                                        <p>已报名</p>
                                    </div>
                                    <div className="fl shengyu_tian">
                                        <span ref="rTime">{p.state.rlist[i-1]}</span>
                                        <p>剩余时间</p>
                                    </div>
                                    <div className={p.state.bmFlag[i-1]?"fl btn_baom un":"fl btn_baom"} data={obj.id} onClick={p.state.bmFlag[i-1]?"":p.baoming}>
                                        我要报名
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            )
        });
        return (
            <div>
                {prolist}
            </div>
        )
    }
});